<template>
  <div class="settings-content">
    <div class="content-header">
      <h2>墙纸与屏幕保护程序</h2>
      <p class="content-description">选择一张图片或颜色作为桌面背景</p>
    </div>

    <!-- 壁纸预览 -->
    <div class="wallpaper-preview">
      <div class="preview-container" :style="currentWallpaperStyle">
        <div class="preview-label">预览</div>
      </div>
    </div>

    <!-- 壁纸类型选择 -->
    <div class="wallpaper-types">
      <button
        v-for="type in wallpaperTypes"
        :key="type.id"
        class="type-btn"
        :class="{ active: wallpaperType === type.id }"
        @click="wallpaperType = type.id"
      >
        {{ type.label }}
      </button>
    </div>

    <!-- 纯色壁纸 -->
    <div v-if="wallpaperType === 'solid'" class="wallpaper-grid">
      <h3 class="section-title">纯色</h3>
      <div class="color-grid">
        <div
          v-for="color in solidColors"
          :key="color.id"
          class="color-item"
          :class="{ selected: desktopStore.wallpaper === color.value }"
          :style="{ background: color.value }"
          @click="selectWallpaper(color.value, color.name)"
        >
          <div class="color-checkmark" v-if="desktopStore.wallpaper === color.value">✓</div>
        </div>
      </div>
    </div>

    <!-- 渐变壁纸 -->
    <div v-if="wallpaperType === 'gradient'" class="wallpaper-grid">
      <h3 class="section-title">渐变</h3>
      <div class="gradient-grid">
        <div
          v-for="gradient in gradientWallpapers"
          :key="gradient.id"
          class="gradient-item"
          :class="{ selected: desktopStore.wallpaper === gradient.value }"
          :style="{ background: gradient.value }"
          @click="selectWallpaper(gradient.value, gradient.name)"
        >
          <div class="gradient-name">{{ gradient.name }}</div>
          <div class="gradient-checkmark" v-if="desktopStore.wallpaper === gradient.value">✓</div>
        </div>
      </div>
    </div>

    <!-- 图片壁纸 -->
    <div v-if="wallpaperType === 'image'" class="wallpaper-grid">
      <h3 class="section-title">图片</h3>
      <div class="gradient-grid">
        <div
          v-for="image in imageWallpapers"
          :key="image.id"
          class="gradient-item"
          :class="{ selected: desktopStore.wallpaper === image.value }"
          :style="{ backgroundImage: `url(${image.preview})`, backgroundSize: 'cover', backgroundPosition: 'center' }"
          @click="selectWallpaper(image.value, image.name)"
        >
          <div class="gradient-name">{{ image.name }}</div>
          <div class="gradient-checkmark" v-if="desktopStore.wallpaper === image.value">✓</div>
        </div>
      </div>
    </div>

    <!-- 动态壁纸 -->
    <div v-if="wallpaperType === 'dynamic'" class="wallpaper-grid">
      <h3 class="section-title">动态</h3>
      <div class="gradient-grid">
        <div
          v-for="dynamic in dynamicWallpapers"
          :key="dynamic.id"
          class="gradient-item"
          :class="{ selected: desktopStore.wallpaper === dynamic.value }"
          :style="{ background: dynamic.preview }"
          @click="selectWallpaper(dynamic.value, dynamic.name)"
        >
          <div class="gradient-name">{{ dynamic.name }}</div>
          <div class="gradient-checkmark" v-if="desktopStore.wallpaper === dynamic.value">✓</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useDesktopStore } from '../../../stores/desktop'

const desktopStore = useDesktopStore()
const wallpaperType = ref('gradient')

const wallpaperTypes = [
  { id: 'gradient', label: '渐变' },
  { id: 'image', label: '图片' },
  { id: 'dynamic', label: '动态' },
  { id: 'solid', label: '纯色' },
]

const solidColors = [
  { id: 1, name: '深空灰', value: '#1c1c1e' },
  { id: 2, name: '石墨黑', value: '#2c2c2e' },
  { id: 3, name: '午夜蓝', value: '#1a1f3a' },
  { id: 4, name: '深紫', value: '#2d1b4e' },
  { id: 5, name: '深蓝', value: '#0a1929' },
  { id: 6, name: '深绿', value: '#0d2818' },
  { id: 7, name: '玫瑰粉', value: '#3d1e28' },
  { id: 8, name: '银白', value: '#e5e5ea' },
  { id: 9, name: '浅灰', value: '#f5f5f7' },
  { id: 10, name: '天蓝', value: '#007aff' },
  { id: 11, name: '薄荷绿', value: '#30d158' },
  { id: 12, name: '亮橙', value: '#ff9500' },
]

const gradientWallpapers = [
  {
    id: 1,
    name: 'Sonoma',
    value: 'linear-gradient(135deg, #1a0633 0%, #2d1b4e 25%, #4a2c6b 50%, #6b3d88 75%, #8e4aa5 100%)'
  },
  {
    id: 2,
    name: 'Sequoia',
    value: 'linear-gradient(135deg, #0a1929 0%, #1a3a52 25%, #2a5a7a 50%, #3a7a9a 75%, #4a9aba 100%)'
  },
  {
    id: 3,
    name: 'Ventura',
    value: 'linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)'
  },
  {
    id: 4,
    name: 'Monterey',
    value: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
  },
  {
    id: 5,
    name: 'Big Sur',
    value: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)'
  },
  {
    id: 6,
    name: 'Catalina',
    value: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)'
  },
  {
    id: 7,
    name: 'Mojave',
    value: 'linear-gradient(135deg, #f77062 0%, #fe5196 100%)'
  },
  {
    id: 8,
    name: 'High Sierra',
    value: 'linear-gradient(135deg, #6a11cb 0%, #2575fc 100%)'
  },
]

const imageWallpapers = [
  {
    id: 1,
    name: '湖央',
    value: 'http://cdn-hsyq-static.shanhutech.cn/bizhi/staticwp/202503/dbf47ee968a9a7efcceaf2f2fe78233d--794305496.jpg',
    preview: 'http://cdn-hsyq-static.shanhutech.cn/bizhi/staticwp/202503/dbf47ee968a9a7efcceaf2f2fe78233d--794305496.jpg'
  },
  {
    id: 2,
    name: 'saber',
    value: 'http://cdn-hsyq-static.shanhutech.cn/bizhi/staticwp/202503/58027a08072962c94c5b3cc2a5a1e1af--1459684851.jpg',
    preview: 'http://cdn-hsyq-static.shanhutech.cn/bizhi/staticwp/202503/58027a08072962c94c5b3cc2a5a1e1af--1459684851.jpg',
  },
  {
    id: 3,
    name: '北欧',
    value: 'http://cdn-hsyq-static.shanhutech.cn/bizhi/staticwp/202307/85c5f3e6e3b7e7d3b073eba198e5252d--3012408619.jpg',
    preview: 'http://cdn-hsyq-static.shanhutech.cn/bizhi/staticwp/202307/85c5f3e6e3b7e7d3b073eba198e5252d--3012408619.jpg',
  },
  {
    id: 4,
    name: '温迪',
    value: 'http://cdn-hsyq-static.shanhutech.cn/bizhi/staticwp/202304/a4350c37dd30c92ed0cef1105ebd80aa--3659089106.jpg',
    preview: 'http://cdn-hsyq-static.shanhutech.cn/bizhi/staticwp/202304/a4350c37dd30c92ed0cef1105ebd80aa--3659089106.jpg',
  },
  {
    id: 5,
    name: '朦胧',
    value: 'http://cdn-hsyq-static-bak.shanhutech.cn/bizhi/staticwp/201807/4857a3e303e43b1101dff75e085a908a.jpg',
    preview: 'http://cdn-hsyq-static-bak.shanhutech.cn/bizhi/staticwp/201807/4857a3e303e43b1101dff75e085a908a.jpg',
  },
  {
    id: 6,
    name: '向日葵',
    value: 'http://cdn-hsyq-static.shanhutech.cn/bizhi/staticwp/202206/d062933c784392e0cb2345f130a90810--2656876710.jpg',
    preview: 'http://cdn-hsyq-static.shanhutech.cn/bizhi/staticwp/202206/d062933c784392e0cb2345f130a90810--2656876710.jpg',
  }
]

const dynamicWallpapers = [
  {
    id: 1,
    name: '紫色梦境',
    value: 'linear-gradient(135deg, #1a0633 0%, #8e4aa5 100%)',
    preview: 'linear-gradient(135deg, #1a0633 0%, #8e4aa5 100%)'
  },
  {
    id: 2,
    name: '蓝色海洋',
    value: 'linear-gradient(135deg, #0a1929 0%, #4a9aba 100%)',
    preview: 'linear-gradient(135deg, #0a1929 0%, #4a9aba 100%)'
  },
  {
    id: 3,
    name: '日落橙',
    value: 'linear-gradient(135deg, #ff6b6b 0%, #ffd93d 100%)',
    preview: 'linear-gradient(135deg, #ff6b6b 0%, #ffd93d 100%)'
  },
  {
    id: 4,
    name: '森林绿',
    value: 'linear-gradient(135deg, #0d2818 0%, #30d158 100%)',
    preview: 'linear-gradient(135deg, #0d2818 0%, #30d158 100%)'
  },
]

const currentWallpaperStyle = computed(() => {
  const wallpaper = desktopStore.wallpaper

  // 如果是图片 URL (data URI 或 http)
  if (wallpaper.startsWith('data:image') || wallpaper.startsWith('http') || wallpaper.startsWith('/')) {
    return { backgroundImage: `url(${wallpaper})`, backgroundSize: 'cover', backgroundPosition: 'center' }
  }

  // 如果是渐变或纯色
  return { background: wallpaper }
})

function selectWallpaper(value: string, name: string) {
  desktopStore.setWallpaper(value)
  console.log(`已切换壁纸：${name}`)
}
</script>

